<template>
    <el-dialog
        style="padding: 32px; padding-bottom: 50px; border-radius: 12px"
        v-model="appStore.dialogWallet"
        width="526"
        align-center
    >
        <template #header>
            <div class="text-18px font-bold mb-24px">Connect a wallet</div>
        </template>
        <div class="flex flex-col gap-16px" @click="appStore.choseWallet">
            <div v-for="(v, i) in buttons" :key="i">
                <el-button
                    style="
                        width: 462px;
                        height: 56px;
                        border: 1px solid #e8effb;
                        border-radius: 8px;
                    "
                >
                    <template #default>
                        <div class="w-462px flex items-center justify-between pl-24px pr-16px">
                            <div class="flex items-center gap-24px text-16px text-#141A21 font-500">
                                <el-image class="w-32px" :src="v.icon" fit="fill" />
                                <div>{{ v.name }}</div>
                            </div>
                            <div class="i-carbon:chevron-right w-20px h-20px text-#141A21" />
                        </div>
                    </template>
                </el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const buttons = [
    {
        id: 1,
        name: 'MetaMask',
        icon: '/images/logo.svg'
    },
    {
        id: 2,
        name: 'CoinBase Wallet',
        icon: '/images/coinbase.svg'
    },
    {
        id: 3,
        name: 'WalletConnect',
        icon: '/images/walletConnect.svg'
    },
    {
        id: 4,
        name: 'Hive Wallet',
        icon: '/images/hiveWallet.svg'
    }
]
</script>
